$control-captionbar: (
  color: getCssVar('color', 'text', 0),
  font-size: getCssVar('font-size', 'header-4'),
  font-weight: getCssVar('font-weight', 'bold'),
);

@include b(control-captionbar) {
  @include set-component-css-var(control-captionbar, $control-captionbar);

  position: relative;
  height: 100%;
  padding: 0 getCssVar('spacing', 'base');

  @include b(control-captionbar-caption) {
    @include utils-ellipsis;

    position: relative;
    height: 100%;
    padding-left: getCssVar('spacing', 'base');
    font-size: getCssVar('control-captionbar', 'font-size');
    font-weight: getCssVar('control-captionbar', 'font-weight');
    color: getCssVar('control-captionbar', 'color');

    @include flex(row, flex-start, center);

    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 4px;
      height: 20px;
      content: '';
      background-color: getCssVar('color', 'primary');
      border-radius: 2px;
      transform: translateY(-50%);
    }
  }
}

@include b(view) {
  &:not(.#{bem(view-appindexview)}) {
    .#{bem(view)} {

      .#{bem(view)} {

        .#{bem(control-captionbar-caption)} {
          #{getCssVarName('control-captionbar', 'font-size')}: getCssVar('font-size', 'header-5');
          #{getCssVarName('control-captionbar', 'font-weight')}: getCssVar('font-weight', 'regular');

          &::before {
            content: none;
          }
        }
      }
    }
  }
}
